import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'
export default class Message extends Component {
  state = {
    MassageArr: [
      {
        id: '01',
        title: 'Message111',
      },
      {
        id: '02',
        title: 'Message222',
      },
      {
        id: '03',
        title: 'Message333',
      },
    ],
  }

  render() {
    const { MassageArr } = this.state
    return (
      <div>
        <ul>
          {/* 3种传参方法 params search state */}
          {MassageArr.map((item) => {
            return (
              <li key={item.id}>
                {/* 第一种 params  to={`/home/message/detail/${item.id}/${item.title}`}*/}
                {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>
                  {item.title}
                </Link> */}
                {/*  第二种 通过search 传递参数 to={`/home/message/detail/?id=${item.id}&title=${item.title}`}*/}
                {/* <Link
                  to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>
                  {item.title}
                </Link> */}
                {/* 第三 state传参 */}
                <Link
                  to={{
                    pathname: '/home/message/detail',
                    state: { id: item.id, title: item.title },
                  }}>
                  {item.title}
                </Link>
              </li>
            )
          })}
        </ul>
        {/* params 路由配置  path="/home/message/detail/:id/:title"*/}
        {/* <Route
          path="/home/message/detail/:id/:title"
          component={Detail}>
        </Route> */}

        {/* search 路由无需声明接收*/}
        {/* <Route path="/home/message/detail" component={Detail}></Route> */}
        {/*state 路由无需声明接收*/}
        <Route path="/home/message/detail" component={Detail}></Route>
      </div>
    )
  }
}
